<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header @refresh="refresh" />
    <div class="page-main">
      <div class="page-main-query con-header">
        <FilterBar>
          <template #left>
            <el-form :inline="true">
              <el-form-item>
                <el-input
                  v-model="query.evtName"
                  placeholder="搜索事件对账"
                  @input="refresh"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="query.httpStatus"
                  placeholder="请选择状态"
                  clearable
                  @change="refresh"
                >
                  <el-option
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item"
                    :value="index"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="daterange">
                <el-date-picker
                  style="width: 250px"
                  v-model="query.daterange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  @change="queryChange"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="search-btn" @click="reset"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
          </template>
        </FilterBar>
      </div>
      <!-- 表格 -->
      <DynamicTable
        class="table-container"
        :total="total"
        v-model:current="page.current"
        v-model:size="page.size"
        :data="list"
        :columns="tableColumns"
        @pagination="getList"
      />
    </div>
    <Detail v-model="showDetail" :logId="logId" />
  </div>
</template>

<script lang="jsx">
export default {
  name: "EventAccount",
};
</script>

<script lang="jsx" setup>
import { ref, onMounted, reactive, toRefs } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import Header from "@/components/Header.vue";
import FilterBar from "@/components/FilterBar.vue";
import DynamicTable from "@/components/DynamicTable";
import Detail from "./components/AccoutDetail.vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { useListManage } from "@/hooks";
import { Search } from "@element-plus/icons-vue";
import { parseTime, httpStatusCode } from "@/utils/index.js";
import { getEventAccountList, retryPush } from "@/api/event.js";
const query = reactive({});
const props = defineProps();
const emit = defineEmits();
const store = useStore();
const router = useRouter();
let { page, list, total, refresh, getList, queryChange, reset } = useListManage(
  props,
  emit,
  {
    getItems: getEventAccountList,
    query: query,
  }
);

const tableColumns = ref([
  { key: "evtName", label: "事件名称" },
  {
    key: "httpStatus",
    label: "状态",
    render: (h, params) => {
      return h("div", [
        h(
          "span",
          {
            class: {
              green: params.row.httpStatus == "200" ? true : false,
              red: true,
            },
          },
          httpStatusCode[params.row.httpStatus]
        ),
      ]);
    },
  },
  { key: "appName", label: "调用应用" },
  {
    label: "请求时间",
    render: (h, params) => <span>{parseTime(params.row.requestTime)}</span>,
  },
  {
    label: "操作",
    fixed: "right",
    width: "200px",
    render: (h, params) => (
      <span>
        {
          <el-button
            type="text"
            size="small"
            disabled={
              params.row.httpStatus == "200" || params.row.retryNum !== 0
            }
            onClick={() => againPush(params.row.id)}
          >
            重新推送
          </el-button>
        }
        {
          <el-button
            type="text"
            size="small"
            onClick={() => getDetailShow(params.row.id)}
          >
            详情
          </el-button>
        }
      </span>
    ),
  },
]);
const state = reactive({
  abnormalList: ["消费时间", "推送失败", "事件积压"],
  dateRange: "",
  startDate: "",
  endDate: "",
  showDetail: false,
  logId: "",
  options: httpStatusCode,
});
const { abnormalList, options, startDate, endDate, showDetail, logId } =
  toRefs(state);

async function againPush(logId) {
  let { message } = await retryPush(logId);
  if (message == "请求成功") {
    ElMessage.success("重新推送成功");
    getList();
  }
}
// 详情
const getDetailShow = async (id) => {
  state.logId = id;
  state.showDetail = true;
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.status {
  color: green;
  &.red {
    color: red;
  }
}
.table-container {
  height: calc(100% - 180px);
}
.el-form--inline .el-form-item {
  margin-right: 0 !important;
  & + .el-form-item {
    margin-left: 10px;
  }
}
</style>
